Skip to content

fix(web): clip form-sheet parent box; mirror iOS cascade rules#687

Merged
lodev09 merged 4 commits into
mainfrom
feat/web-form-sheet-parent-clip
May 19, 2026
Merged

fix(web): clip form-sheet parent box; mirror iOS cascade rules#687
lodev09 merged 4 commits into
mainfrom
feat/web-form-sheet-parent-clip

Conversation

@lodev09

@lodev09 lodev09 commented May 19, 2026

Copy link
Copy Markdown
Owner

Summary

Three related fixes to form-sheet stacking on web.

  • Clip parent to form-card box when a form-sheet child opens, so the parent doesn't peek above/around the centered card. Geometry is read from the child's inline styles (not getBoundingClientRect) to get the at-rest box, unskewed by vaul's slide-in. clip-path animates with the same duration/easing as the cascade transform so the visible box and the drawer content slide together.
  • Skip cascade transform when a form-sheet parent has a page-sheet child — mirrors iOS, where the page covers the form entirely. Avoids the parent peeking above the page mid-animation.
  • Cascade tracks only the immediate child's snap point. Previously walked all descendants and pushed the parent further when a grandchild opened — even when the immediate child stayed put (e.g., child skipped its cascade for a page grandchild), leaving a visible gap.

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation update

Test Plan

  • Open form sheet → open form-sheet child: parent clips to child's box, no peek above.
  • Open form sheet → open page-sheet child: parent stays put, no cascade.
  • Open form sheet (main) → open form-sheet child (basic) → open page-sheet grandchild: main does not shift further when grandchild opens; basic skips cascade for page grandchild.
  • Dismiss children: clip releases, parent returns to original position.

Checklist

  • I tested on iOS
  • I tested on Android
  • I tested on Web
  • I updated the documentation (if needed)
  • I added a changelog entry (if needed)

lodev09 added 3 commits May 20, 2026 04:53
…hild

- Extract setClip helper to unify CLIP_NONE reset and dedupe writes
- Add cornerRadius to cascade effect deps (was stale closure)
- Mirror iOS: form parent with page child skips cascade transform — the
  page fully covers the form, so the push-down would only peek mid-animation
Walking all descendants pushed an ancestor further when a grandchild
opened — even when the immediate child stayed put (e.g., child skipped
its cascade for a page grandchild), leaving a visible gap.
@vercel

vercel Bot commented May 19, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
react-native-true-sheet Ready Ready Preview, Comment May 19, 2026 9:26pm

Request Review

@lodev09 lodev09 merged commit 18c0757 into main May 19, 2026
6 checks passed
@lodev09 lodev09 deleted the feat/web-form-sheet-parent-clip branch May 19, 2026 21:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant